Lucie
MANZONI

Durant cette SAE, j'ai dû, dans une première partie, créer un site web à partir d’une base de données et étant capable d’ajouter, de modifier ou de supprimer du contenu à celle -ci. Dans une deuxième partie, j'ai dû ajouter des interactions javascript et des animations en CSS avancé.

Durant la première partie, j’ai d’abords pris du temps pour réfléchir au sujet de mon site, et j’ai finalement choisi de présenter des films d’animation japonaise. Ensuite, j’ai dû commencer à imaginer ma base de donner, qui devait comporter au moins 3 tables reliées. Après validation de mon idée, j’ai commencé à la créer et à la remplir avec des colonnes que je pensais utile. Ensuite, j’ai commencé à développer mon site web. Pour cela, j’ai d’abord imaginé l’aspect de la « page index.php » avant de commencer à la coder. Je l’ai d’abord faite sans prendre en compte la base de données, avec juste un film (non issu de la base de données) avant de commencer à coder mes requêtes SQL et à les intégrer dans mon fichier. Grâce aux cours, nous avions les instructions pour connecter nos pages à la base de données et intégrer les requêtes, dans une seule page appellée « identifiant.php ». Il suffisait ensuite d’inclure les requêtes nécessaires dans « page.php », qui donne des informations sur chaque site de la base de données. Pour ces 2 pages web, les requêtes servaient uniquement à prendre des informations dans la base de données (avec SELECT). J’ai agi de même pour les autres pages, en les imaginant avant de les coder de manière simple avant d’y intégrer la base de données. Pour les modifications de la base de données à travers le site, j’ai créé une page « admin.php » qui permet de choisir un film à travers une liste déroulante (lié à une requete SELECT) et 3 boutons ‘modifier’, ‘supprimer’ et ‘ajouter’ qui menait à des pages du même nom (.php). Ici, j’ai du effectuer des requêtes SELECT, INSERT INTO, UPDATE et DELETE pour modifier les données d’un film. Tout au long de cette programmation, j’ai également codé mon fichier CSS pour mettre en forme le tout, et effectué des tests réguliers pour m’assurer de la bonne voie de mon travail.

Durant la deuxième partie, nous devions inclure à notre site web 3 scripts Javascript pour rendre le site interactif et 3 éléments de CSS avancé ainsi qu’une fonctionnalité ‘darkmode’ codée uniquement en CSS. Contrairement au CSS, choisir les animations javascript a été très compliqué en raison d’une liste de choix imposé. Pour commencer j’ai du faire un wireframe de mes pages web avec des représentations de mes ajouts javascript et CSS.

Voici également les wireframes réalisées pendant ma recherche d'inspiration.

Voir le site Page admin

Le thème sombre/clair ne fonctionne pas sur le navigateur Firefox. Ceci est dû à l'utilisation de la pseudo-classe :has(), pour reconnaître le :root du bouton clair/sombre et qui n'est pas connu par Firefox. Mes professeurs exigeaient que cette fonctionnalité soit créée uniquement avec du CSS, ce qui m'a empêchée d'utiliser du Javascript.